<template>
  <section class="vipcard-privilege">
    <p class="heading">
      为账户
      <span class="name">{{user.username}}</span>
      购买会员
    </p>

    <section class="privilege">
      <div class="title">
        <span>会员特权</span>
        <span class="explain" @click="handleVipDescription"
          >会员说明
          <i></i>
        </span>
      </div>
      <div class="detail-1">
        <img src="~assets/img/profile/sheng.jpeg" alt="" class="left" />
        <div class="right">
          <h4>减免配送费</h4>
          <p>每月减免30单，每日可减免3单，每单最高减4元</p>
          <p>蜂鸟专送专享</p>
        </div>
      </div>
      <div class="detail-2">
        <img src="~assets/img/profile/jifen.jpeg" alt="" class="left" />
        <div class="right">
          <h4>减免配送费</h4>
          <p>每月减免30单，每日可减免3单，每单最高减4元</p>
          <p>蜂鸟专送专享</p>
        </div>
      </div>
    </section>
  </section>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    handleVipDescription() {
      this.$router.push('/vipcard/vipDescription')
    }
  }
};
</script>
<style lang="less" scoped>
.vipcard-privilege {
  margin-bottom: 10px;
  color: #333333;
  .heading {
    padding: 10px 20px;
    font-size: 14px;
    color: #666666;
    .name {
      color: #333333;
    }
  }
  .privilege {
  padding-left: 20px;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
      padding-left: 0;
      border-bottom: 1px solid #f5f5f5;
      font-size: 15px;
      .explain {
        color: #b3a6c4;
        i {
          position: relative;
          top: -2px;
          display: inline-block;
          width: 8px;
          height: 8px;
          border-top: 2px solid #b3a6c4;
          border-right: 2px solid #b3a6c4;
          transform: rotate(45deg);
        }
      }
    }
    .detail-1,
    .detail-2 {
      display: flex;
      padding: 20px 0;
      border-bottom: 1px solid #f5f5f5;
      .right {
        p {
          margin-top: 5px;
          font-size: 12px;
          color: #999999;
        }
      }
    }
    img {
      width: 37px;
      height: 42px;
      margin-right: 20px;
    }
  }
}
</style>